<template>
	<view class="container">

		<uni-section title="添加会员信息" type="line">
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
					<uni-forms-item label="用户ID" required name="ID">
						<uni-easyinput v-model="customFormData.ID" placeholder="请输入用户ID" />
					</uni-forms-item>
					<uni-forms-item label="会员备注" >
						<uni-easyinput v-model="customFormData.name" placeholder="请输入会员备注" />
					</uni-forms-item>
				
					<uni-forms-item label="会员分类" required name="section">
						<uni-data-checkbox v-model="customFormData.section" multiple :localdata="section" />
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('customForm')">提交</button>
			</view>
		</uni-section>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				// 多选数据源
				section: [{
					text: '普通会员',
					value: 0
				}, {
					text: '白银会员',
					value: 1
				}, {
					text: '黄金会员',
					value: 2
				}, {
					text: '超级会员',
					value: 3
				}],
				
				// 自定义表单数据
				customFormData: {
					ID: '',
					name: '',
					section: []
				},
				// 自定义表单校验规则
				customRules: {
					ID: {
						rules: [{
							required: true,
							errorMessage: '用户ID不能为空'
						}]
					},
					section: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 1) {
										callback('请至少勾选一个分类')
									}
									return true
								}
							}
						]
					}

				}
			}
		},
		computed: {
			// 处理表单排列切换
			alignment() {
				if (this.current === 0) return 'left'
				if (this.current === 1) return 'top'
				return 'left'
			}
		},
		onLoad() {},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs.customForm.setRules(this.customRules)
		},
		methods: {
			onClickItem(e) {
				console.log(e);
				this.current = e.currentIndex
			},
			del(id) {
				let index = this.dynamicLists.findIndex(v => v.id === id)
				this.dynamicLists.splice(index, 1)
			},
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
